<template>
	<view class="bl-more-page">
		<!-- 分类选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', currentTab === index ? 'active' : '']"
				@click="switchTab(index)">{{ tab }}</view>
		</view>

		<!-- 记录列表 -->
		<scroller @init="initScroller" @down="refreshData" @up="loadMoreData" :up="optUp" :fixed="false">
			<view v-for="(group, month) in groupedRecords" :key="month" class="month-group">
				<view class="month-title">{{ formatMonth(month) }}</view>
				<view v-for="(record, index) in group" :key="index" class="record-item">
					<view class="record-main">
						<view class="info-row">
							<view class="lipid-values">
								<view class="lipid-row">
									<text class="value">总胆固醇: {{ record.tc }}mmol/L</text>
									<text class="value">甘油三酯: {{ record.tg }}mmol/L</text>
								</view>
								<view class="lipid-row">
									<text class="value">高密度脂蛋白: {{ record.hdl }}mmol/L</text>
									<text class="value">低密度脂蛋白: {{ record.ldl }}mmol/L</text>
								</view>
							</view>
						</view>
						<view class="info-row">
							<text style="font-size: 10px;">测量时间：{{ record.measuredTime}}</text>
							<text class="method">上传方式：{{ record.sourceName }}</text>
						</view>
						<view class="info-row">
							<text class="upload-time">上传时间：{{ formatTime(record.uploadTime || record.measuredTime) }}</text>
						</view>
					</view>
					<view class="status-tag" :style="{background: record.color}">{{ record.tag}}</view>
				</view>
			</view>
		</scroller>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import {
		listBloodLipid
	} from '@/api/healthData/everyBloodLipid.js'
	export default {
		components: {
			scroller
		},
		data() {
			return {
				name: this.$store.state.user.name,
				userId: this.$store.state.user.userId,
				queryParam: {},
				tabs: ['全部', '异常血脂', '正常血脂'],
				dictsList: [],
				currentTab: 0,
				records: [],
				scroller: {},
				optUp: {
					onScroll: true, //监听滚动事件
					page: {
						size: 10 //每页加载10条
					}
				}
			}
		},
		computed: {
			groupedRecords() {
				const groups = {}
				this.records.forEach(record => {
					const month = record.measuredTime.substring(0, 7)
					if (!groups[month]) groups[month] = []
					groups[month].push(record)
				})
				return groups
			}
		},
		onShow() {

		},
		onLoad(options) {
			// 检查是否有筛选参数
			if (options.filter === 'abnormal') {
				this.currentTab = 1
			}
		},
		created() {
			this.$dict.getDicts('blood_lipid_type').then(res => {
				this.dictsList = res.data
			})
		},
		methods: {
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},
			/*刷新数据*/
			refreshData() {
				this.loadData()
			},
			/*加载数据*/
			loadData() {
				this.records = [];
				this.scroller.resetUpScroll();
			},
			switchTab(index) {
				this.currentTab = index
				if(index===0){
					this.queryParam.tag=''
					this.loadData()
				}else if(index===2){
					this.queryParam.tag='正常'
					this.loadData()
				}else if(index===1){
					this.queryParam.tag='异常'
					this.loadData()
				}
			},
			formatMonth(month) {
				const [year, monthNum] = month.split('-')
				return `${year}年${monthNum}月`
			},
			formatTime(time) {
				return time.replace('-', '年').replace('-', '月').replace(' ', ' ').replace(':', '时') + '分'
			},
			async loadMoreData() {
				this.queryParam.pageNum = this.scroller.num
				this.queryParam.pageSize = this.scroller.size
				this.queryParam.userId = this.userId
				
				const { rows, total } = await listBloodLipid(this.queryParam)
				this.records = this.records.concat(rows);
				this.$forceUpdate();
				this.scroller.endBySize(rows.length, total);
				uni.stopPullDownRefresh();
				uni.hideLoading();
			}
		}
	}
</script>

<style>
	.bl-more-page {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.tabs {
		display: flex;
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 15px;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #000;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -5px;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 2px;
		background: #FFA600;
	}

	.record-list {
		height: calc(100vh - 110px);
	}

	.month-title {
		padding: 15px;
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.record-item {
		margin: 0 15px 12px;
		padding: 16px;
		background: #fff;
		border-radius: 6px;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
	}

	.record-main {
		flex: 1;
		margin-right: 45px;
	}

	.info-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 8px;
		font-size: 12px;
		color: #000;
		justify-content: space-between;
	}

	.lipid-values {
		flex: 1;
	}

	.lipid-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 4px;
	}

	.lipid-values .value {
		font-size: 12px;
		color: #000;
		flex: 1;
	}

	.method {
		min-width: 120px;
		text-align: right;
		font-size: 10px;
		color: #000;
	}

	.upload-time {
		color: #999;
		font-size: 10px;
	}

	.status-tag {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 13px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		writing-mode: vertical-lr;
		letter-spacing: 2px;
		padding: 10px 0;
	}

	.status-tag.high {
		background: #FF4141;
	}

	.status-tag.normal {
		background: #07C160;
	}

	.status-tag.low {
		background: #2B7AF5;
	}
</style>
